import { Drawer, Tabs } from 'antd';
import { useState } from 'react';
import { AddressList, CouponLog, CouponManagement, OperationLog, PointsLog } from './components';
export interface Props {
  isShow: boolean;
  data: any;
  onCancel: () => void;
}

export default function CustomerDetail(props: Props) {
  const { isShow, data } = props;
  const [activeKey, setActiveKey] = useState('coupon');
  const onOpenChange = (open: boolean) => {
    if (!open) {
      setActiveKey('coupon');
      props.onCancel();
    }
  };
  return (
    <Drawer
      destroyOnClose
      footer={null}
      open={isShow}
      title={'客户详情'}
      width={960}
      bodyStyle={{ padding: '0 15px' }}
      onClose={() => onOpenChange(false)}
    >
      <Tabs
        activeKey={activeKey}
        onChange={(activeKey) => setActiveKey(activeKey)}
        items={[
          {
            label: '优惠券',
            key: 'coupon',
            children: <CouponManagement userId={data.id} />,
          },
          {
            label: '优惠券核销',
            key: 'couponLog',
            children: <CouponLog userId={data.id} />,
          },
          {
            label: '收货地址',
            key: 'addressList',
            children: <AddressList userId={data.id} />,
          },
          {
            label: '操作日志',
            key: 'operationLog',
            children: <OperationLog userId={data.id} />,
          },
          {
            label: '积分日志',
            key: 'pointsLog',
            children: <PointsLog userId={data.id} />,
          },
        ]}
      ></Tabs>
    </Drawer>
  );
}
